<template>
	<view class="left clearfix detail-box">
		<view style="font-size:16px;padding:15px;background: #fff;">
			<uni-breadcrumb separator="/">
				<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
					{{route.name}}
				</uni-breadcrumb-item>
			</uni-breadcrumb>
		</view>

		<loading v-if="loading" ></loading>
		
		<view v-else class="detail-content left clearfix">
			<uni-table border stripe :emptyText="data || '暂无更多数据'"  style="border:1px solid #ccc;min-height:100px;margin:10rpx 0" >
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" style="width:200px;">用户信息</uni-th>
					<uni-th>
						<navigator v-if="userHasPermission(['admin','administrators'])" :url="`/pages/system/user/list?_uid=${data.user._id}`" >
							<text class="underlineApp" >
								查看用户信息
							</text>
						</navigator>
					</uni-th>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						用户ID
					</uni-td>
					<uni-td>
						{{data.user._id}}
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						用户头像
					</uni-td>
					<uni-td>
						<image v-if="data.user.avatar" @click="eventImage(data.user.avatar)" :src="data.user.avatar+'?x-oss-process=image/resize,m_fixed,h_100,w_100'" mode="widthFix" style="width:70rpx;" ></image>
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						用户名称
					</uni-td>
					<uni-td>
						{{data.user.nickname}}
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						评论图片
					</uni-td>
					<uni-td v-if="data.images.length">
						<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
							<swiper-item 
								v-for="(items, indexs) in data.images" :key="indexs"
								@click="eventImage(items)"
							>
								<image :src="items" mode="widthFix" width="50%"></image>
							</swiper-item>
						</swiper>
					</uni-td>
				</uni-tr>
			</uni-table>
			
			
			<uni-table border stripe :emptyText="data || '暂无更多数据'"  style="border:1px solid #ccc;min-height:100px;margin:50px 0" >
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" style="width:200px;">
						商家评价
					</uni-th>
					<uni-th>
						<navigator v-if="userHasPermission(['admin','administrators'])" :url="`/pages/shop/shop/shop-info?_uid=${data.shop._id}`" >
							<text class="underlineApp" >
								查看商铺信息
							</text>
						</navigator>
					</uni-th>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						商铺ID
					</uni-td>
					<uni-td>
						{{data.shop._id}}
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						商铺logo
					</uni-td>
					<uni-td >
						<image v-if="data.shop.logo" :src="data.shop.logo+'?x-oss-process=image/resize,m_fixed,h_100,w_100'" mode="widthFix" style="width:70rpx;height:70px;" ></image>
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						商铺名称
					</uni-td>
					<uni-td>
						{{data.shop.title}}
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						总评价
					</uni-td>
					<uni-td>
						<view class="" :style="`color:${shopriderIF(0,data.shop.total_score).color };font-weight:bold`">
							{{shopriderIF(0,data.shop.total_score).text }}
						</view>	
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						平均分
					</uni-td>
					<uni-td>
						<uni-rate size="18" readonly :value="data.shop.average_score?data.shop.average_score:5" />
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						菜品口味
					</uni-td>
					<uni-td>
						<uni-rate size="18" readonly :value="data.shop.shop_taste?data.shop.shop_taste:5" />
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" readonly class="detail-uni-td-weight">
						包装质量
					</uni-td>
					<uni-td>
						<uni-rate size="18" readonly :value="data.shop.shop_package?data.shop.shop_package:5" />
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						服务态度
					</uni-td>
					<uni-td>
						<uni-rate size="18" readonly :value="data.shop.shop_attitude?data.shop.shop_attitude:5" />
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						评价内容
					</uni-td>
					<uni-td>
						{{data.shop.shop_content?data.shop.shop_content:'暂无'}}
					</uni-td>
				</uni-tr>
			</uni-table>
			
			
			<uni-table border stripe :emptyText="data || '暂无更多数据'"  style="border:1px solid #ccc;min-height:100px;margin:50px 0" >
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" style="width:200px;">
						骑手评价
					</uni-th>
					<uni-th>
						<navigator v-if="userHasPermission(['admin','administrators'])" :url="`/pages/system/user/list?_uid=${data.rider._id}`" >
							<text class="underlineApp" >
								查看骑手信息
							</text>
						</navigator>
					</uni-th>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						骑手ID
					</uni-td>
					<uni-td>
						{{data.rider._id}}
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						骑手头像
					</uni-td>
					<uni-td>
						<image v-if="data.rider.avatar" :src="data.rider.avatar+'?x-oss-process=image/resize,m_fixed,h_100,w_100'" mode="widthFix" style="width:70rpx;" ></image>
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						骑手名称
					</uni-td>
					<uni-td>
						{{data.rider.name}}
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						总评价
					</uni-td>
					<uni-td>
						<view class="" :style="`color:${shopriderIF(1,data.rider.total_score).color };font-weight:bold`">
							{{shopriderIF(1,data.rider.total_score).text }}
						</view>	
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						平均分
					</uni-td>
					<uni-td>
						<uni-rate size="18" readonly :value="data.rider.average_score?data.rider.average_score:5" />
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						菜品口味
					</uni-td>
					<uni-td>
						<uni-rate size="18" readonly :value="data.rider.rider_taste?data.rider.rider_taste:5" />
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" readonly class="detail-uni-td-weight">
						包装质量
					</uni-td>
					<uni-td>
						<uni-rate size="18" readonly :value="data.rider.rider_package?data.rider.rider_package:5" />
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						服务态度
					</uni-td>
					<uni-td>
						<uni-rate size="18" readonly :value="data.rider.rider_attitude?data.rider.rider_attitude:5" />
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						评价内容
					</uni-td>
					<uni-td>
						{{data.rider.rider_content?data.rider.rider_content:'暂无'}}
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						评价内容
					</uni-td>
					<uni-td>
						<text class="item" v-for="(item,index) in data.rider.label" >
							{{item}}
						</text>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>
<script>
	import Util from "@/js_sdk/validator/util.js"
	const db  = uniCloud.database()
	const global = uniCloud.importObject("global",{customUI:true})
	const collection = "comment"
	export default {
		data() {
			return {
				ID:'',
				// 面包屑
				routes: [
					{to: "/pages/index/index",name: "首页",},
					{to: "",name: "日志管理",},
					{to: "/pages/log/feedback/feedback",name: "用户评论",},
					{to: "",name: "评论详情"}
				],
				loading:true,
				data:{
				}
			}
		},
		onLoad(e) {
			this.ID = e._uid
			this.getData()
		},
		methods: {
			getData(){
				db.collection(collection).where({_id:this.ID}).get({getOne: true,getCount: true}).then(res => {
					console.log(res.result.data);
					this.data = res.result.data
					this.loading = false
				})
			},
			/**
			 * 商家/骑手评分审判
			 * @param platform 0商家 、1骑手
			 * @param number 分数*/
			 shopriderIF(platform,number){
				 if (platform===0) {
					if (number <= 18 && number >= 13 )
						return {color:"#189bfa",text:"良好"}
					else if (number <= 13 && number >= 8)
						return {color:"#fb9a40",text:"一般"}
					else if (number <= 8)
						return {color:"#E7321D",text:"差劲"}
					else
						return {color:"#00d300",text:"优秀"}
				 } 
				 else if (platform === 1) {
					 if (number <= 13 && number >= 10 )
						return {color:"#189bfa",text:"良好"}
					 else if (number <= 10 && number >= 6)
						return {color:"#fb9a40",text:"一般"}
					 else if (number <= 6)
						return {color:"#E7321D",text:"差劲"}
					 else
						return {color:"#00d300",text:"优秀"}
				 }
			 },
			// 放大图片
			eventImage(image){
				uni.previewImage({
					urls:[image]
				})
			},
			userHasPermission(admin=['']){
				return Util.userHasPermission(admin)
			},
			goUrl(Url){
				uni.navigateTo({
					url:Url
				})
			},
			initMobile(mobile){
				return Util.formatPhoneNumber(mobile)
			},
			goback(){
				uni.navigateBack(1)
			}
		}
	}
</script>


<style scoped>
	.item{
		background: #eee;
		padding:2px 10px; border-radius:5px;
		margin: 0 10px 0 0
	}
	.popup {
		width: 500px;
		border-radius: 20rpx;
		padding: 30rpx;
	
		button {
			margin: 20px 50rpx;
		}
	}
	.uni-button{
		margin:0 10rpx
	}
	.detail-box {
		width: 100%;
		min-height:400px;
		background: #fff;
	}

	.detail-content {
		width: 90%;
		min-height:300px;
		margin-left: 5%;
		margin-top: 20px;
	}
</style>